<template>
  <div class="container">
    <div class="video-wrap">
      <div class="video" ref="videoList" :style="videoStyle">
        <div class="player-wrap" v-for="ind in videoNum" :key="ind" @click="videoPlayerClick(ind - 1)">
          <NstdVideoPlayer
            playType="backVideo"
            :sendType="videoList[ind - 1].sendType"
            :index="ind - 1"
            :videoConf="videoList[ind - 1]"
            ref="players"
            v-if="videoList.length > 0 && videoList[ind - 1] && videoList[ind - 1].nvrCode"
            @complete="complete"
          >
          </NstdVideoPlayer>
          <div
            class="mark"
            :class="deviceIndex === ind - 1 ? 'active' : ''"
            v-if="videoList[ind - 1]"
            @click="videoPlayerClick(ind - 1)"
          ></div>
        </div>
      </div>
      <TimeLine ref="Timeline" :areas="areas" @timeChange="timeChange"></TimeLine>
      <div class="video-opt">
        <template v-for="(itm, ind) in videoOptList">
          <div v-if="['fast', 'slow'].includes(itm.value)" class="playSpeed opreat" :key="itm.value + ind">
            <el-popover ref="popover" placement="bottom" width="100" trigger="hover">
              <div slot="reference" class="playSpeed-wrap">
                <img :src="itm.src" alt="" />
                <span>{{ itm.name }}</span>
              </div>
              <el-menu
                style="background-color: transparent; border: none"
                :default-active="active"
                class="el-menu-vertical"
                @select="select"
              >
                <el-menu-item
                  :index="item.toFixed(1)"
                  :key="item.toFixed(1)"
                  :class="['rate', active == item ? 'active' : '']"
                  v-for="item in itm.value === 'slow' ? playbackRates.slice(0, 2) : playbackRates.slice(2)"
                  >{{ item === 1 ? '正常' : item + '倍' }}</el-menu-item
                >
              </el-menu>
              <!-- <div class="playSpeedDialog1">
                  <ul>
                    <li :class="{ pointer: true, active: currentRate === item }" @click="changePlayRates(item)" v-for="(item, index) in itm.value === 'slow' ? playbackRates.slice(0,3) : playbackRates.slice(3)" :key="index" style="color:#fff;padding-left: 45px;">{{ item }}</li>
                  </ul>
                </div> -->
            </el-popover>
          </div>
          <div
            class="opreat"
            v-if="itm.type === 'opreat' && itm.show"
            @click="videoOptClick(itm, ind)"
            :key="itm + ind"
          >
            <img :src="itm.src" alt="" />
            <span>{{ itm.name }}</span>
          </div>
          <div class="devider" v-if="itm.type === 'devider' && itm.show" :key="ind"></div>
        </template>
        <div class="time-label" v-if="totalTime">总时长:{{ totalTime }}</div>
      </div>
    </div>
    <NstdBoxTitle noPadding class="opt-wrap" title="设备信息">
      <div style="display: flex; flex-direction: column; height: 100%">
        <div class="top">
          <!-- <div class="device-info">
            <el-tooltip effect="dark" placement="top-start" :content="'当前NVR：' + (deviceForm.nvrName || '--')"
              ><div class="first-txt">当前NVR：{{ deviceForm.nvrName || '--' }}</div></el-tooltip
            >
            <el-tooltip
              effect="dark"
              placement="top-start"
              :content="'当前NVR离在线状态：' + (deviceForm.nvrInline === 1 ? '在线' : '离线' || '--')"
              ><div class="first-txt"
                >当前NVR离在线状态：{{ deviceForm.nvrInline === 1 ? '在线' : '离线' || '--' }}</div
              ></el-tooltip
            >
            <el-tooltip
              effect="dark"
              placement="top-start"
              :content="'当前NVR容量：' + (deviceForm.nvrTotalCapacity || '--')"
              ><div class="first-txt">当前NVR容量：{{ deviceForm.nvrTotalCapacity || '--' }}</div></el-tooltip
            >
            <el-tooltip
              effect="dark"
              placement="top-start"
              :content="'当前NVR已使用容量：' + (deviceForm.nvrUseCapacity || '--')"
              ><div class="first-txt">当前NVR已使用容量：{{ deviceForm.nvrUseCapacity || '--' }}</div></el-tooltip
            >
            <el-tooltip
              effect="dark"
              placement="top-start"
              :content="'当前NVR使用容量占比：' + (deviceForm.nvrUseRate || '--')"
              ><div class="first-txt">当前NVR使用容量占比：{{ deviceForm.nvrUseRate || '--' }}</div></el-tooltip
            >
            <div>
              <el-tooltip
                effect="dark"
                placement="top-start"
                :content="'当前摄像头：' + (deviceForm.camareName || '--')"
              >
                <div class="first-txt current-camera">当前摄像头：{{ deviceForm.camareName || '--' }}</div>
              </el-tooltip>
              <span style="margin-left: 70px" class="second-txt turn-line"
                >录像时长：{{ deviceForm.recordDuration || '--' }}</span
              >
              <div class="second-item">
                <span class="second-txt">录像完整性：</span>
                <span class="second-txt">{{ deviceForm.recordCompletness || '--' }}</span>
              </div>
              <div class="second-item">
                <span class="second-txt">录像周期：</span>
              </div>
              <div class="second-item">
                <span class="second-txt">开始时间：</span>
                <span class="second-txt">{{ deviceForm.recordCycle.startTime || '--' }}</span>
              </div>
              <div class="second-item">
                <span class="second-txt">结束时间：</span>
                <span class="second-txt">{{ deviceForm.recordCycle.endTime || '--' }}</span>
              </div>
            </div>
          </div> -->
          <div class="hunt-time">
            <el-form
              ref="form"
              :inline="true"
              :model="form"
              size="mini"
              label-position="right"
              label-width="80px"
              @submit.native.prevent
            >
              <el-form-item label="开始时间" required>
                <el-date-picker
                  v-model="form.startTime"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
              <el-form-item label="结束时间" required>
                <el-date-picker
                  v-model="form.endTime"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
            </el-form>
            <div class="hunt-bnt">
              <button @click="retrieveResources" class="sx-btn">筛选</button>
            </div>
          </div>
        </div>
        <NstdBoxTitle style="flex: 1" noPadding title="录像资源列表">
          <el-table @row-click="rowClick" :data="replayInspection" style="width: 100%; font-size: 14px" height="100%">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column
              prop="fileName"
              width="100"
              align="center"
              label="文件名"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="endTime"
              width="110"
              align="center"
              label="录像结束时间"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template v-slot="{ row }">
                <div v-if="progeressMap[row.fileName]" calss="progress-bar">
                  <div class="progress-bar-item" :style="{ width: progeressMap[row.fileName] }"></div>
                  <span class="progress-bar-text">{{ progeressMap[row.fileName] }}</span>
                </div>
                <el-icon v-else :size="size" :color="color" @click.stop="historyVideoCtrlGetHistoryVideoLoadPath(row)">
                  <Download />
                </el-icon>
                <!-- <a
                  v-else
                  class="el-icon-download"
                  @click.stop="historyVideoCtrlGetHistoryVideoLoadPath(row)"
                  style="cursor: pointer"
                  >下载</a
                > -->
              </template>
            </el-table-column>
          </el-table>
        </NstdBoxTitle>
      </div>
    </NstdBoxTitle>
  </div>
</template>
<script>
  import CsncUtils from 'csnc-utility-js';
  import { encode } from 'js-base64';
  import TimeLine from './TimeSlider/index.vue';

  import dayjs from 'dayjs';
  import NstdBoxTitle from './NstdBoxTitle.vue';
  import NstdVideoPlayer from './NstdVideoPlayerWfs.vue';
  import {
    cameraCtrlRestGetHistoryVideo,
    historyVideoCtrlCameraOperaParam,
    historyVideoCtrlGetHistoryVideoLoadPath,
    cameraCtrlRestDownload,
    cameraCtrlRestPlayVideo
  } from '@/api/inspect.js';
  import one from '../../../../assets/icon/one.png';
  import four from '../../../../assets/icon/four.png';
  import nine from '../../../../assets/icon/nine.png';
  import sixteen from '../../../../assets/icon/sixteen.png';
  import fullpage from '../../../../assets/icon/fullpage.png';
  import pause from '@/assets/images/intelligentInspection/pause.png';
  import action from '@/assets/images/intelligentInspection/action.png';
  import fasts from '@/assets/images/intelligentInspection/fast.png';
  import slows from '@/assets/images/intelligentInspection/slow.png';

  function millisecondsToHMS(milliseconds) {
    var date = new Date(milliseconds);

    // 获取时、分、秒
    var hours = date.getUTCHours();
    var minutes = '0' + date.getUTCMinutes();
    var seconds = '0' + date.getUTCSeconds();

    // 格式化输出
    var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
    return formattedTime;
  }

  export default {
    name: 'VideoReplay',
    components: {
      NstdBoxTitle,
      NstdVideoPlayer,
      TimeLine
    },
    props: {
      currentDeviceInfo: {
        type: Object,
        default: () => {}
      },
      currentTreeInfo: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        active: '1.0',
        visible: false,
        playbackRates: [0.25, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5],
        videoList: [{}], // 当前在播视频流列表
        videoConf: {}, // 当前视频流配置信息
        videoNum: 1, // 视频流分屏个数
        videoCol: 1, // 视频流分屏列数
        patrolDeviceCode: '', // 左侧树对应设备code
        nvrCode: '', // 当前视频流对应设备code
        stationCode: '', // 左侧树对应设备父级节点变电站code
        deviceIndex: 0, // 当前选中视频流下标
        patrolDeviceInfo: {}, // 当前左侧树选中巡视设备配置
        deviceForm: {
          // 当前设备信息
          nvrName: '',
          nvrInline: 0,
          nvrTotalCapacity: '',
          nvrUseCapacity: '',
          nvrUseRate: '',
          camareName: '',
          recordDuration: '',
          recordCompletness: '',
          recordCycle: {
            startTime: '',
            endTime: ''
          }
        },
        form: {
          // 筛选条件
          startTime: '',
          endTime: ''
        },
        replayInspection: [], // 录像资源列表信息
        sendType: '',
        currentRate: 1,
        fastFlag: false,
        slowFlag: false,
        progeressMap: {},
        colors: [
          { color: '#f56c6c', percentage: 20 },
          { color: '#e6a23c', percentage: 40 },
          { color: '#5cb87a', percentage: 60 },
          { color: '#1989fa', percentage: 80 },
          { color: '#6f7ad3', percentage: 100 }
        ]
      };
    },
    watch: {
      patrolDeviceCode: {
        handler(n) {
          if (n) {
            this.replayInspection = [];
          }
        },
        deep: true,
        immediate: true
      },
      currentDeviceInfo: {
        handler(n) {
          if (n) {
            // 左侧树点击设置设备初始化相关信息
            this.patrolDeviceInfo = n;
            const { patrolDeviceCode, nvrCode, stationCode } = this.patrolDeviceInfo;
            this.patrolDeviceCode = patrolDeviceCode || '';
            this.nvrCode = nvrCode || '';
            this.stationCode = stationCode || '';
          }
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      videoStyle() {
        const item = this.videoCol;
        const itemBox = 100 / item + '%';
        return {
          'grid-template-columns': `repeat(${item}, ${itemBox})`,
          'grid-template-rows': `repeat(${item}, ${itemBox})`
        };
      },
      videoOptList() {
        return [
          {
            type: 'opreat',
            show: true,
            src: one,
            name: '一屏',
            value: 'one'
          },
          {
            type: 'opreat',
            show: true,
            src: four,
            name: '四屏',
            value: 'four'
          },
          {
            type: 'opreat',
            show: true,
            src: nine,
            name: '九屏',
            value: 'nine'
          },
          {
            type: 'opreat',
            show: true,
            src: sixteen,
            name: '十六屏',
            value: 'sixteen'
          },
          {
            type: 'opreat',
            show: true,
            src: fullpage,
            name: '全屏',
            value: 'fullpage'
          },
          {
            type: 'devider',
            show: true
          },
          {
            type: 'opreat',
            show:
              this.videoList.length > 0 &&
              this.videoList[this.deviceIndex] &&
              this.videoList[this.deviceIndex].playStatus
                ? this.videoList[this.deviceIndex].playStatus === 'pause'
                : false,
            src: pause,
            name: '暂停',
            value: 'pause'
          },
          {
            type: 'opreat',
            show:
              this.videoList.length > 0 &&
              this.videoList[this.deviceIndex] &&
              this.videoList[this.deviceIndex].playStatus
                ? this.videoList[this.deviceIndex].playStatus === 'play'
                : true,
            src: action,
            name: '播放',
            value: 'play'
          },
          {
            type: 'devider',
            show: true
          },
          {
            show: true,
            src: fasts,
            name: '快放',
            value: 'fast'
          },
          {
            show: true,
            src: slows,
            name: '慢放',
            value: 'slow'
          }
        ];
      },
      currentTime() {},
      totalTime() {
        const currentDeviceInfo = this.videoList[this.deviceIndex];
        if (currentDeviceInfo && currentDeviceInfo.startTime && currentDeviceInfo.endTime) {
          const timestamp =
            new Date(currentDeviceInfo.endTime).valueOf() - new Date(currentDeviceInfo.startTime).valueOf();
          return millisecondsToHMS(timestamp);
        } else {
          return null;
        }
      },
      areas() {
        // debugger;
        const currentDeviceInfo = this.videoList[this.deviceIndex];
        console.log('currentDeviceInfo', currentDeviceInfo);
        if (currentDeviceInfo && currentDeviceInfo.startTime && currentDeviceInfo.endTime) {
          console.log('currentDeviceInfo.startTime', currentDeviceInfo);
          return [
            {
              startTime: currentDeviceInfo.startTime,
              endTime: currentDeviceInfo.endTime
            }
          ];
        } else {
          return [];
        }
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        const now = dayjs();
        this.form.startTime = now.subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss');
        this.form.endTime = now.format('YYYY-MM-DD HH:mm:ss');
      },
      complete(index) {
        this.videoList.splice(index, 1, {});
        this.videoConf = {};
        this.rowData = {};
      },
      timeChange(e) {
        const video = this.$refs.videoList?.children?.[this.deviceIndex]?.children[0] ?? null;
        if (!this.videoList[this.deviceIndex].guid) return false;
        this.videoList[this.deviceIndex].playStatus = 'pause';
        if (video) {
          video?.__vue__?.timeChange(e);
          this.$nextTick(() => {
            video.play();
          });
        }
      },
      select(rate) {
        if (this.active === rate) return false;
        this.active = rate;
        this.$refs.popover.forEach((item) => item.doClose());
        this.rateVideo(Number(rate));
        // if (!this.videoList[this.deviceIndex].guid) return false
        // const video = this.$refs.videoList?.children?.[this.deviceIndex]?.children[0] ?? null
        // if (video) {
        //   video.playbackRate = rate
        // }
      },
      // 录像列表行数据 -- 点击
      rowClick(row) {
        this.active = '1.0';
        this.rowData = row;
        // const arr = this.videoList.filter(itm => itm.fileName === this.rowData.fileName)
        // if (arr.length) {
        //   this.$message.error('当前视频已获取!')
        //   return
        // }
        this.cameraCtrlRestPlayVideo();
      },
      // 录像回放信息
      async cameraCtrlRestPlayVideo() {
        // debugger;
        const { nvrCode, nvrChannel } = this.patrolDeviceInfo;
        const { startTime, endTime } = this.rowData;
        const params = {
          id: nvrCode,
          channelNo: String(nvrChannel),
          startTime: startTime,
          endTime: endTime
        };
        const { code, data } = await cameraCtrlRestPlayVideo(params);
        if (code !== 200 || !data) {
          this.$message.error('获取录像回放信息失败！');
          return;
        }
        const { resultData } = data;
        const tempObj = {
          ...this.patrolDeviceInfo,
          ...this.rowData,
          playStatus: 'pause',
          guid: CsncUtils.guid(),
          ...(resultData || {})
        };
        this.videoList.splice(this.deviceIndex, 1, tempObj);
        this.videoConf = tempObj;
        this.$forceUpdate();
      },
      // 视频流对应框 -- 点击
      videoPlayerClick(ind) {
        this.deviceIndex = ind;
        this.videoConf = this.videoList[this.deviceIndex];
      },
      // 视频流底部操作按钮 -- 点击
      videoOptClick(item, index) {
        const obj = {
          one: 1,
          four: 4,
          nine: 9,
          sixteen: 16
        };
        if (item.type === 'opreat') {
          if (obj[item.value]) {
            this.videoNum = obj[item.value];
            this.videoCol = Math.sqrt(obj[item.value]);
            const total = this.videoNum - this.videoList.length;
            if (total > 0) {
              for (let i = 1; i <= total; i++) {
                this.videoList = [...this.videoList, {}];
              }
            }
          } else if (['pause', 'play'].includes(item.value)) {
            if (!this.videoConf.key) {
              this.$message.error('请选择视频！');
              return;
            }
            this.videoOptList[index].show = false;
            const handleObj = {
              pause: 'play',
              play: 'pause'
            };
            const filterIndex = this.videoOptList.findIndex((itm) => itm.value === handleObj[item.value]);
            this.videoOptList[filterIndex].show = true;
            const obj = {
              pause: 'pauseVideo',
              play: 'playVideo'
            };
            this[obj[item.value]]();
          } else if (item.value === 'fullpage') {
            if (!this.videoList[this.deviceIndex].guid) return false;
            const element = this.$refs.videoList?.children?.[this.deviceIndex] ?? null;
            if (element) {
              this.toggleFullscreen(element);
            }
          }
        }
      },
      toggleFullscreen(el) {
        if (!document.fullscreenElement) {
          el.requestFullscreen().catch((err) => {
            console.log(`打开全屏模式失败: ${err.message} (${err.name})`);
          });
        } else {
          this.exitFullscreen();
        }
      },
      exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      },
      changePlayRates(val) {
        this.currentRate = val;
      },
      // 暂停视频流
      pauseVideo() {
        this.videoList[this.deviceIndex].sendType = 'backVideoPause';
        this.videoList[this.deviceIndex].playStatus = 'play';
        this.$forceUpdate();
        this.$nextTick(() => {
          if (!this.videoList[this.deviceIndex].guid) return false;
          const video = this.$refs.videoList?.children?.[this.deviceIndex]?.children[0] ?? null;
          if (video) {
            video.pause();
          }
        });
      },
      playVideo() {
        this.videoList[this.deviceIndex].sendType = 'backVideoRetPlay';
        this.videoList[this.deviceIndex].playStatus = 'pause';
        this.$forceUpdate();
        this.$nextTick(() => {
          if (!this.videoList[this.deviceIndex].guid) return false;
          const video = this.$refs.videoList?.children?.[this.deviceIndex]?.children[0] ?? null;
          if (video) {
            video.play();
          }
        });
      },
      rateVideo(rate) {
        this.videoList[this.deviceIndex].sendType = 'backVideoScale';
        this.$set(this.videoList[this.deviceIndex], 'v', rate);
        this.$forceUpdate();
      },
      // 筛选
      retrieveResources() {
        // debugger;
        if (!this.currentTreeInfo) return this.$message.error('请选择设备！');
        if (this.currentTreeInfo.videoStatus === 1) return this.$message.error('此设备已离线，无法获取录像资源列表');

        if (!this.nvrCode) {
          this.$message.error('请选择设备！');
          return;
        }
        if (!this.form.startTime || !this.form.endTime) {
          this.$message.error('开始时间或结束时间不能为空！');
          return;
        }
        if (new Date(this.form.startTime).valueOf() >= new Date(this.form.endTime).valueOf()) {
          return this.$message.error('开始时间应小于结束时间！');
        }
        // this.historyVideoCtrlCameraOperaParam();
        this.cameraCtrlRestGetHistoryVideo();
      },
      // 历史录像查询
      async cameraCtrlRestGetHistoryVideo() {
        const { nvrCode, nvrChannel, patrolDeviceCode } = this.patrolDeviceInfo;
        const params = {
          id: nvrCode,
          patroldeviceCode: patrolDeviceCode,
          channelNo: String(nvrChannel),
          pageSize: 9999,
          pageNum: 1,
          ...this.form
        };
        const { code, data } = await cameraCtrlRestGetHistoryVideo(params);
        if (code !== 200 || !data) {
          this.$message.error('获取录像资源列表失败！');
          return;
        }
        const { resultData } = data;
        this.replayInspection = resultData || [];
      },
      // 实时监控-录像回放-设备信息
      async historyVideoCtrlCameraOperaParam() {
        const { nvrCode, nvrChannel, patrolDeviceCode } = this.patrolDeviceInfo;
        const params = {
          id: nvrCode,
          patroldeviceCode: patrolDeviceCode,
          channelNo: String(nvrChannel),
          ...this.form
        };
        const { code, data } = await historyVideoCtrlCameraOperaParam(params);
        if (code !== 200 || !data) {
          this.$message.error('获取录像资源列表失败！');
          return;
        }
        this.deviceForm = data || {};
      },
      // 实时监控-录像回放-录像资源下载路径获取
      async historyVideoCtrlGetHistoryVideoLoadPath(row) {
        if (this.progeressMap[row.fileName]) return false;
        const { nvrCode } = this.patrolDeviceInfo;
        const params = {
          fileName: row.fileName,
          id: nvrCode
        };
        // this.$set(this.progeressMap, [row.fileName], null);
        const { code, data } = await historyVideoCtrlGetHistoryVideoLoadPath(params);
        if (code !== 200 || !data) {
          // this.$delete(this.progeressMap, [row.fileName]);
          this.$message.error('获取资源下载路径失败，请稍后重试！');
          return;
        }
        this.cameraCtrlRestDownload({ recodePath: data, fileName: row.fileName });
      },
      // 录像下载
      async cameraCtrlRestDownload(item) {
        if (!item || !item.recodePath) {
          return;
        }
        const regex = /\/([^/]+?)(\.[^.]+)?$/;
        const name = regex.exec(item.recodePath)[1] || '录像文件';
        const params = {
          filePath: encode(item.recodePath)
        };
        const axiosConfig = {
          responseType: 'blob',
          onDownloadProgress: (progressEvent) => {
            const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100) + '%';
            console.log('progress', progress);
            // this.$set(this.progeressMap, [item.fileName], progress);
          }
        };
        cameraCtrlRestDownload(params, axiosConfig)
          .then((res) => {
            const URL = window.URL || window.webkitURL;
            const url = URL.createObjectURL(res.data);
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', name);
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(url);
            document.body.removeChild(link);
            // this.$delete(this.progeressMap, [item.fileName]);
          })
          .catch(() => {
            // this.$set(this.progeressMap, [item.fileName], '下载失败');
          });
      }
    }
  };
</script>
<style lang="less" scoped>
  .container {
    display: flex;
    height: 100%;
  }
  .video-wrap {
    position: relative;
    // width: 1120px;
    // width:100%;
    flex: 1;
    margin-right: 10px;
  }
  .video {
    // width: 1120px;
    width: 100%;
    height: 630px;
    display: grid;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-around;
    // align-items: flex-start;
    .player-wrap {
      position: relative;
      position: relative;
      background-color: #000;
      margin-left: 1px;
      margin-top: 1px;
      .mark {
        position: absolute;
        pointer-events: none;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 1;
      }
      .active {
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border: 1px dashed red;
      }
    }
  }
  .video-1 {
    width: 1120px;
    height: 630px;
    background-color: #000;
  }
  .video-2 {
    width: 560px;
    height: 315px;
    background-color: #000;
  }
  .video-3 {
    width: 1120px;
    height: 630px;
    background-color: #000;
  }
  .video-4 {
    width: 1120px;
    height: 630px;
    background-color: #000;
  }
  .video-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    // width: 1120px;
    width: 100%;
    height: 60px;
    margin-top: 8px;
    background: linear-gradient(271deg, rgba(29, 212, 231, 0) 0%, #1dd4e7 60%, rgba(29, 212, 231, 0) 100%);
    border-radius: 4px;
    border: 1px solid;
    border-image: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) 1 1;
    .opreat {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 50px;
      cursor: pointer;
      img {
        width: 28px;
        height: 28px;
        margin-bottom: 4px;
      }
      span {
        display: inline-block;
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        line-height: 20px;
        text-align: center;
        font-style: normal;
      }
    }
    .devider {
      width: 1px;
      height: 60px;
      margin-right: 50px;
      background: linear-gradient(180deg, rgba(225, 247, 255, 0) 0%, #d1f2ff 48%, rgba(192, 236, 255, 0) 100%);
    }
    .playSpeed {
      .playSpeed-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
        img {
          width: 28px;
          height: 28px;
          margin-bottom: 4px;
        }
        span {
          display: inline-block;
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #ffffff;
          line-height: 20px;
          text-align: center;
          font-style: normal;
        }
      }
      &:hover {
        .playSpeedDialog {
          display: block;
          z-index: 99;
        }
      }
      .playSpeedDialog {
        position: absolute;
        display: none;
        width: 100px;
        bottom: 53px;
        right: -42px;
        background: rgba(20, 20, 20, 0.6);
        font-size: 12px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        li {
          height: 30px;
          width: 100%;
          text-align: center;
          line-height: 30px;
          &:hover {
            background-color: #697381;
          }
          &.active {
            background-color: #fff;
            color: black;
          }
        }
      }
    }
  }
  .opt-wrap {
    width: 345px;
    height: 100%;
    margin-right: 10px;
    .device-info {
      margin-top: 10px;
    }
    .first-txt {
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      margin-left: 10px;
      // 超出显示省略号
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    // .current-camera{
    //   position: relative;
    //   &:after{
    //     content: '';
    //       position: absolute;
    //       left: 28px;
    //       bottom: -16px;
    //       width: 28px;
    //       height: 18px;
    //       border-left: 1px dashed #1DD4E7;
    //       border-bottom: 1px dashed #1DD4E7;
    //   }
    // }
    .turn-line {
      position: relative;
      &:before {
        content: '';
        position: absolute;
        left: -32px;
        top: -8px;
        width: 28px;
        height: 18px;
        border-left: 1px dashed #1dd4e7;
        border-bottom: 1px dashed #1dd4e7;
      }
    }
    .second-item {
      display: flex;
      margin-left: 50px;
      // 超出显示省略号
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .second-txt {
      font-weight: 500;
      font-size: 12px;
      color: #ffffff;
    }
    .second-item span:first-child {
      display: inline-block;
      width: 80px;
      text-align: right;
    }
    .hunt-time {
      width: 300px;
      border-top: 1px solid #127ca0;
      margin: 0 auto;
      padding-top: 10px;
      .hunt-bnt {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 10px;
        .sx-btn {
          background: rgba(29, 212, 231, 0.8);
          border: 1px solid rgba(29, 212, 231, 1);
          min-width: 60px;
          height: 24px;
          margin-right: 10px !important;
          border-radius: 4px;
          color: #fff;
        }
      }
    }
  }
  .rate {
    height: 36px;
    line-height: 36px;
    color: #fff;
    padding-left: 20px;
    &:hover,
    &:focus,
    &:active {
      background-color: rgba(1, 75, 175, 0.9);
    }
  }
  .rate.is-active {
    background-color: rgba(1, 75, 175, 0.9);
  }
  .progress-bar {
    position: relative;
    &-item {
      background-color: rgb(19, 206, 102);
      height: 23px;
    }
    &-text {
      position: absolute;
      color: #fff;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  /deep/.el-table {
    // width: 340px !important;
    height: 500px !important;
    background-color: transparent !important;
    color: #fff !important;
    opacity: 0.9;
    outline: none !important;
  }

  /deep/.el-table tr {
    outline: none !important;
    border: none !important;
    background-color: transparent !important;
    border-bottom: 1px solid rgba(38, 64, 155, 0.5) !important;
    cursor: pointer;
  }

  /deep/.el-table th.is-leaf {
    border: none !important;
    outline: none !important;
  }

  /deep/.el-table--medium td {
    padding: 5px 0 !important;
    margin-top: 5px !important;
  }

  /deep/.el-table td {
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
  }

  /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
    /* background-image: url(../../../assets/img/preview/c_check.png) ; */
    background-color: rgba(10, 138, 206, 0.2) !important;
    outline: none !important;
  }

  /deep/.el-table .cell {
    line-height: normal !important;
  }

  /deep/.el-table__body tr.current-row > td {
    /* background-image: url(../../../assets/img/preview/c_check.png) !important; */
    background-color: rgba(36, 131, 99, 0.6) !important;
    outline: none !important;
  }

  /deep/.el-table .el-table__header-wrapper th {
    /* background-color: transparent !important; */
    background: rgba(18, 124, 160, 0.6) !important;
    height: 40px !important;
    color: #fff !important;
    font-size: 12px !important;
  }
  /deep/.el-table thead {
    background: #193b82 !important;
    font-weight: 100 !important;
  }
  /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #b1daff !important;
  }
  /deep/.el-table__body-wrapper {
    height: 210px;
    overflow-y: scroll !important;
  }
  /deep/.el-table td,
  .el-table th.is-leaf {
    border-bottom: none !important;
  }
  /deep/.el-table td,
  .el-table th {
    text-align: center !important;
    border-bottom: 1px solid #4377bf !important;
  }
  /deep/.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    /* background-color: #203c91!important; */
    background-color: #08193d !important;
  }

  /deep/.el-table th.el-table__cell {
    background-color: transparent !important;
  }
  /deep/.el-table__body-wrapper::-webkit-scrollbar {
    width: 0px !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  /* 滚动条轨道部分 */
  /deep/.el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: transparent !important;
    /* background-color: rgb(15, 43, 87) !important; */
  }

  /* 滚动条滑块部分 */
  /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 0px !important;
    /* background-image: linear-gradient(135deg, #193b82, #193b82); */
    background-color: transparent !important;
  }

  /deep/.el-table::before {
    background-color: transparent !important;
  }
  /deep/.el-form-item__label {
    color: #fff !important;
  }
  /deep/.el-input__wrapper {
    background-color: transparent !important;
    border: none !important;
  }
  /deep/.el-input__inner {
    color: #fff !important;
  }
  /deep/.el-table--fit .el-table__inner-wrapper:before {
    display: none;
  }
</style>
